<template>
  <div class="bg-black note-modal" id="noteModal">
    <div class="bg-content note-content">
      <h5 class="title">写笔记</h5>
      <i class="icon icon-close" @click.stop="close_note($event)"></i>
      <div class="bg-main">
        <textarea
          placeholder="请输入笔记"
          class="notes"
          v-model="content"
        ></textarea>
      </div>
      <div class="bg-btn">
        <button class="bg-submit fc-fff" @click.stop="submit($event)">
          确认
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { QuestionTakeNotes } from '../../api/api'
export default {
  props: {
    //笔记
    noteContent: {
      type: String,
      default: '',
    },
    //笔记id
    questionId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      content: this.noteContent, //笔记内容
    }
  },
  methods: {
    // 提交笔记
    submit(event) {
      event.preventDefault()
      let data = {
        questionId: this.questionId,
        content: this.content,
      }
      QuestionTakeNotes(data)
        .then((res) => {
          if (res.code == 1) {
            this.$toast('提交成功')
            this.$emit('close-note-modal', this.content)
          } else {
            this.$toast('提交失败')
          }
        })
        .catch((err) => {
          this.$toast('提交失败')
        })
    },
    //关闭笔记弹框
    close_note(event) {
      event.preventDefault()
      this.$emit('close-note-modal')
    },
  },
  watch: {
    //监测题目切换点赞状态切换
    noteContent: {
      immediate: true,
      handler(val) {
        this.content = val
      },
    },
  },
}
</script>
<style scoped lang="scss">
.bg-black {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.5rem;
}

.bg-content {
  width: 2.96rem;
  height: 2.96rem;
  background: #ffffff;
  border-radius: 0.04rem;
  padding: 0.2rem;
  position: relative;

  .title {
    text-align: center;
  }

  .bg-btn {
    margin-top: 0.2rem;
    width: 100%;
    display: flex;
    justify-content: center;

    .bg-submit {
      width: 2rem;
      height: 0.36rem;
      background: url('../../assets/images/btn-bg-blue@3x.png') no-repeat
        center/cover;
      background-size: 2.3rem 0.9rem;
      border: none;
    }
  }
}

// 笔记弹框
.note-modal {
  .title {
    font-size: 0.16rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    line-height: 0.22rem;
  }

  i.icon.icon-close {
    width: 0.16rem;
    height: 0.16rem;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    background: url('../../assets/images/icon-close.png') no-repeat center/cover;
    background-size: 0.12rem 0.12rem;
  }

  .bg-main {
    margin-top: 0.2rem;

    textarea {
      width: 100%;
      height: 1.52rem;
      resize: none;
      background: #f6f6f6;
      border: solid 0.01rem #dcdfe6;
      border-radius: 0.04rem;
      padding: 0.12rem;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #061720;
      margin-bottom: 0;
    }

    textarea::-webkit-input-placeholder {
      color: #909399;
    }

    textarea::-moz-placeholder {
      color: #909399;
    }

    textarea::-ms-input-placeholder {
      color: #909399;
    }
  }
}
</style>
